<template>
  <div class="py-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="卡片底色" class="mb-24">
      <ColorSetting v-model="style.backgroundColor" />
    </el-form-item>
    <el-form-item label="尺寸">
      <div class="layout-setting p-24 t-light bd-filt bgc-white">
        <div class="d-flex al-center">
          <div class="label">W</div>
          <el-input-number
            v-model="style.width"
            :step="1"
            step-strictly
            :min="0"
            :max="previewer.width - style.left"
            :disabled="!isLayeredComponent(model)"
            :controls="false"
            size="small"
          />
          <div class="label ml-24">H</div>
          <el-input-number
            v-model="style.height"
            :step="1"
            step-strictly
            :min="0"
            :max="previewer.height - style.top"
            :disabled="!isLayeredComponent(model)"
            :controls="false"
            size="small"
          />
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import ColorSetting from '@/views/productEdit/components/settingComponent/ColorSetting';

  export default {
    components: { ColorSetting },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      ...mapGetters('component', ['previewer', 'isLayeredComponent']),
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .layout-setting ::v-deep {
    width: 360px;

    .label {
      width: 24px;
      text-align: center;
    }

    .el-input-number--small .el-input {
      .el-input__inner {
        border-color: map-get($bgColors, 'lightgrey');
        background-color: map-get($bgColors, 'lightgrey');

        &:focus {
          border-color: map-get($bdColors, 'theme');
          background-color: map-get($bgColors, 'white');
        }
      }
    }
  }
</style>
